<script>
export default {
  name: 'Rank'
}
</script>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const { height } = defineProps(['height'])

const chart = ref()

onMounted(() => {
  const myEcharts = echarts.init(chart.value)

  let chartData = {
    color: '0,205,151',
    yAxisData: ['峨眉山', '九家沟', '长城', '故宫', '土楼'],
    data: [20, 16, 18, 24, 26]
  }

  let max = Math.floor(Math.max(...chartData.data) * 1.2)

  const option = {
    grid: {
      top: 0,
      left: 75,
      right: 50,
      bottom: 0
    },
    xAxis: [
      {
        show: false,
        type: 'value',
        max,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#11456F'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#0B5EA0'
          }
        },
        axisLabel: {
          margin: 20,
          textStyle: {
            color: 'rgb(183,227,252)'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          margin: 20,
          textStyle: {
            fontSize: 16,
            color: '#fff'
          }
        },
        data: chartData.yAxisData
      },
      {
        show: true,
        type: 'category',
        axisTick: 'none',
        axisLine: 'none',
        axisLabel: {
          align: 'left',
          textStyle: {
            fontSize: 20,
            fontWeight: 'bold',
            color: '#02BC8F'
          }
        },
        data: chartData.data
      }
    ],
    tooltip: {
      show: false
    },
    series: [
      {
        name: '',
        type: 'bar',
        barWidth: 20,
        barGap: '-100%',
        label: {
          show: false
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: `rgba(${chartData.color},.1)`
              },
              {
                offset: 1,
                color: `rgba(${chartData.color},.9)`
              }
            ]
          }
        },
        zlevel: 2,
        data: chartData.data
      },
      {
        name: '',
        type: 'pictorialBar',
        itemStyle: {
          color: '#fff'
        },
        symbol: 'rect',
        symbolSize: [4, 24],
        symbolPosition: 'end',
        symbolOffset: [0, -5],
        zlevel: 3,
        data: chartData.data
      },
      {
        name: '',
        type: 'bar',
        zlevel: 2,
        barWidth: 40,
        barGap: '-150%',
        label: {
          show: false
        },
        showBackground: true,
        backgroundStyle: {
          color: 'transparent',
          borderWidth: 2,
          borderColor: 'rgba(7,96,196)'
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: `rgba(22,60,95,0)`
              },
              {
                offset: 0.5,
                color: `rgba(22,60,95,.9)`
              }
            ]
          },
          borderWidth: 27,
          borderColor: 'transparent'
        },
        zlevel: 1,
        data: new Array(chartData.data.length).fill(max)
      }
    ]
  }

  myEcharts.setOption(option)
})
</script>

<template>
  <div
    class="container"
    :style="{ height: isNaN(+height) ? height : height + 'px' }"
  >
    <div class="titleBox">
      <div class="title">
        热门景区流量
        <div class="titleBg">&nbsp;</div>
      </div>
    </div>
    <div class="contentBox">
      <div
        class="chart"
        ref="chart"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  background-color: red;
  background: url(../../../images/dataScreen-main-rt.png) no-repeat;
  background-size: 100% 100%;
  color: white;

  $boxHeight: 14%;
  .titleBox {
    position: relative;
    width: 100%;
    height: $boxHeight;

    .title {
      position: absolute;
      left: 0;
      top: 0;
      font-size: 20px;

      .titleBg {
        margin-top: 10px;
        background: url(../../../images/dataScreen-title.png) no-repeat;
      }
    }
  }

  .contentBox {
    position: relative;
    width: 100%;
    height: calc(100% - $boxHeight);
    padding: 20px;

    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
